<template>
  <section>
    <el-row :class="{ checkStatus }">
      <el-col :span="2"> 审核状态： </el-col>
      <el-col :span="2" :class="{ red: isRed }">
        {{ checkStatus }}
      </el-col>
    </el-row>
    <el-row v-if="isEdit">
      <el-col>
        <el-button type="primary" @click="submitForm">保存并上报</el-button>
        <el-button type="success" @click="() => {}">暂存</el-button>
        <el-button type="warning" @click="() => {}">编辑</el-button>
        <el-button type="default" @click="() => {}">取消</el-button>
        <el-button type="default" @click="() => {}">重置</el-button>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="项目基本信息" name="tab1">
        <base-info></base-info>
      </el-tab-pane>
      <el-tab-pane label="①安全条件审查" name="tab2">
        <safety-conditions></safety-conditions>
      </el-tab-pane>
      <el-tab-pane label="②安全设施设计审查" name="tab13">
        <safety-facility-design></safety-facility-design>
      </el-tab-pane>
      <el-tab-pane label="③试生产使用" name="tab4">
        <production-use></production-use>
      </el-tab-pane>
      <el-tab-pane label="④竣工验收" name="tab5">
        <completion-acceptance></completion-acceptance>
      </el-tab-pane>
      <el-tab-pane label="其他信息" name="tab6">
        <other-message></other-message>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>

<script setup lang="ts">
/**
 * 全局方法引入
 */
const global = getCurrentInstance().appContext.config.globalProperties;

import {
  ref,
  reactive,
  onMounted,
  toValue,
  defineExpose,
  defineEmits,
  getCurrentInstance,
  inject,
} from "vue";
import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
import type { TabsPaneContext } from "element-plus";
import { editKey } from "../components/keys.js";
import BaseInfo from "./BaseInfo.vue";
import SafetyConditions from "./SafetyConditions.vue";
import SafetyFacilityDesign from "./SafetyFacilityDesign.vue";
import ProductionUse from "./ProductionUse.vue";
import CompletionAcceptance from "./CompletionAcceptance.vue";
import OtherMessage from "./OtherMessage.vue";

const isRed = ref(true);
const checkStatus = ref("未审核");
const isEdit = ref(true);
const activeName = ref("tab1");
</script>

<style scoped>
.red {
  color: red;
}
.checkStatus {
  height: 4vh;
}
</style>
